<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
	    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.9&key=95d86102eed223b780a448ed8afdc8d5"></script>
	    <!--<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
		<style>
			ul,ol {
			    list-style: none
			}
			#tip li{
				padding: 10px;
				font-size: 15px;
				color: #666;
				line-height: 17px;
			}
			#tip li:nth-child(1),#tip li:nth-child(2){
				border-bottom: solid 1px #CCCCCC;
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
		<ul  id="tip" style="padding: 0;">
			<li name="0">
				守<br />护
			</li>
			<li name="1">
				围<br />栏
			</li>
			<li name="2">
				轨<br />迹
			</li>
		</ul>
	</body>
	<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
		var map, geolocation;
	    //加载地图，调用浏览器定位服务
	    map = new AMap.Map('container', {
	        resizeEnable: true
	    });
	    map.plugin('AMap.Geolocation', function() {
	        geolocation = new AMap.Geolocation({
	            enableHighAccuracy: true,//是否使用高精度定位，默认:true
	            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
	            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
	            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
	            buttonPosition:'RB'
	        });
	        map.addControl(geolocation);
	        geolocation.getCurrentPosition();
	        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
	        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
	    });
	    //解析定位结果
	    function onComplete(data) {
//	        var str=['定位成功'];
//	        str.push('经度：' + data.position.getLng());
//	        str.push('纬度：' + data.position.getLat());
//	        if(data.accuracy){
//	             str.push('精度：' + data.accuracy + ' 米');
//	        }//如为IP精确定位结果则没有精度信息
//	        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
//	        document.getElementById('tip').innerHTML = str.join('<br>');
	    }
	    //解析定位错误信息
	    function onError(data) {
	        document.getElementById('tip').innerHTML = '定位失败';
	    }
	    // 实例化点标记
	    var markers = [];
	 	function addMarker(a,b,c) {
	        marker = new AMap.Marker({
				map: map,
				icon: new AMap.Icon({            
		            size: new AMap.Size(32, 57),  //图标大小
		            image: c,
		            imageOffset: new AMap.Pixel(-5, 0)
		        }),
	            position: [a, b]
	        });
			markers.push(marker);
	    }
	 	addMarker(121.4044296741, 31.1673518788,'../img/position/01.png')
	 	addMarker(121.4040756226, 31.1667551621,'../img/position/01.png')
	 	addMarker(121.4065432549, 31.1673151579,'../img/position/02.png')
	    //画圆
	    var circle = new AMap.Circle({
	        center: new AMap.LngLat("121.4044296741", "31.1673518788"),// 圆心位置
	        radius: 250, //半径
	        strokeColor: "#F33", //线颜色
	        strokeOpacity: 0, //线透明度
	        strokeWeight: 3, //线粗细度
	        fillColor: "#8bc6f9", //填充颜色
	        fillOpacity: 0.35//填充透明度
	    });
	    circle.setMap(map);
	    //折线
	    var lineArr = [
	        [121.4040756226, 31.1667551621],
	        [121.4042794704, 31.1660207363],
	        [121.4043867588, 31.1657636860],
	        [121.4066827297, 31.1661859826],
	        [121.4065432549, 31.1673151579]
	    ];
	    var polyline = new AMap.Polyline({
	        path: lineArr,          //设置线覆盖物路径
	        strokeColor: "#1a86fd", //线颜色
	        strokeOpacity: 1,       //线透明度
	        strokeWeight: 5,        //线宽
	        strokeStyle: "solid",   //线样式
	        strokeDasharray: [10, 5] //补充线样式
	    });
	    polyline.setMap(map);
	    //触发事件
	    mui("#tip").on('tap','li',function(){
	    		for (var i=0;i<mui("#tip li").length;i++) {
	    			mui("#tip li")[i].setAttribute("style","color: #666;")
	    		}
		   this.setAttribute("style","color: #ff8b3c;");
		   var liname = this.getAttribute("name");
		   if(liname == "1"){
		   	markers[1].setMap(null);
        		markers[2].setMap(null);
		   	polyline.hide();
		   	markers[0].setMap(map);
		   	circle.show();
		   }else if(liname == "2"){
		   	circle.hide();
		   	markers[0].setMap(null);
		   	markers[1].setMap(map);
        		markers[2].setMap(map);
		   	polyline.show();
		   }else{
		   	polyline.show();
		   	circle.show();
		   	markers[0].setMap(map);
		   	markers[1].setMap(map);
        		markers[2].setMap(map);
		   	map.panTo([121.4044296741, 31.1673518788]);
		   }
		}) 
	</script>
</html>